<template>
  <div class="footer" v-if="TodosStore.todos.length !== 0">
    <span>{{ TodosStore.unTodoCount }}项未完成</span>
    <div>
      <span @click="TodosStore.clearTodo">清除已完成</span>
      <span class="selectAll" @click="TodosStore.checkAll">全选</span>
    </div>
  </div>
  <div v-else style="text-align: center; color: red">暂无任务</div>
</template>

<script setup>
import useTodosStore from "../Store/modules/Todos";

const TodosStore = useTodosStore();
</script>

<style lang="scss" scoped>
.footer {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;

  .selectAll {
    margin-left: 10px;
  }
}
</style>